/**
 * @author deming.su
 * @date 2022-02-17
 * @description 定义数据管理器的state、getters、mutations、actions、modules配置
 */
// 进行vuex插件注册
import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

// 引入模块
import common from './common'

// 实例化 -- 因为是模块化管理，所以每一个模块应该是一个独立的模块（每一个模块应该是一个文件）
const store = new Vuex.Store({

    // 添加vuex数据持久化库插件
    plugins: [
        // 注册插件
        // 我们的数据都是用户登录以后才有的数据，应该为一个会话数据，所以应该存在sessionStorage中
        persistedState({
            // 指定存储数据的位置
            storage: window.sessionStorage
        })
    ],

    modules: {
        common,
        // 定义common模块 -- 应该把模块的具体实现抽取出去，成为一个独立的模块
        // common: {
        //     // 开启命名空间
        //     namespaced: true,

        //     // 四大核心配置
        //     state: {
        //         // 通用票据 -- 解决http无状态使用的一个凭证
        //         token: 'init token'
        //     },

        //     getters: {
        //         // getter方法要获取到state的值，才能返回state值，所以方法必须有一个state形参
        //         getToken(_state) {
        //             return _state.token
        //         }
        //     },

        //     actions: {
        //         // 把处理后的数据提交到mutation中去进行数据更新，接收数据，所以就有两个形参
        //         tokenAct(_store, _data) {
        //             Promise.resolve().then(() => {
        //                 // 为什么这里不需要加模块名字
        //                 _store.commit('setToken', 'TOKEN - ' + _data)
        //             })
        //         }
        //     },

        //     mutations: {
        //         // 给state数据赋值，就需要接收数据，那么就需要两个形参
        //         setToken(_state, _token) {
        //             _state.token = _token
        //         }
        //     }
        // }
    }
})

export default store